<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <!--兼容性问题-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <!--搜索引擎-->
    <meta name="author" content="jerehedu">
    <meta name="keywords" content="bootstrap,css,html">
    <meta name="description" content="jerehedu">

    <style type="text/css"></style>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/supersized.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="bootstrapfile/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/BackToTop_orange.jquery.css" type="text/css" />

    <!--个人css-->
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>

<header class="bg">
      <div class="bgon">
           <div class="container">
               <div class="col-md-4 pa-photo"><img src="img/个人照.jpg" alt=""class="img-responsive img-circle"/></div>
               <div class="col-md-8 pa-intruduce page-header"id="top">
                   <h2 class="hello-style">Hello</h2>
                   <h2>我的名字是: &nbsp;宫晨</h2>
               </div>
                 <ul>
                     <li>
                         <ul>
                             <li class="desc1">电话：</li>
                             <li class="desc">18865550155</li>
                         </ul>
                     </li>
                     <li>
                         <ul>
                             <li class="desc1">QQ:</li>
                             <li class="desc">&nbsp;&nbsp; 917727564</li>
                         </ul>
                     </li>
                     <li>
                         <ul>
                             <li class="desc1">地址：</li>
                             <li class="desc">山东烟台烟台大学</li>
                         </ul>
                     </li>
                     <li>
                         <ul>
                             <li class="desc1">邮箱：</li>
                             <li class="desc">917727564@qq.com</li>
                         </ul>
                     </li>
                     <li>
                         <ul>
                             <li class="desc1"style="margin-right: 18px">个人主页：</li>
                             <li class="desc">917727564@qq.com</li>
                         </ul>
                     </li>

                     <li>
                         <ul>
                             <li class="desc1"style="display:block;text-align: center;">主要技能：</li>
                             <li class="desc"style="display:block;text-align: center">
                                 <p>
                                 1.	熟练掌握HTML、CSS、JavaScript，熟悉HTML5和CSS3等相关新特性
                                 <br/>
                                 2.	熟练掌握JS开发框架jQuery。<br/>
                                 3.	熟练掌握CSS3媒体查询和bootstrap开发框架等响应式开发技术<br/>
                                 4.	熟悉Ajax、JSON、 DOM等前端技术，掌握面向对象编程思想<br/>
                                 5.	熟悉前端MVC架构angularJs<br/>
                                 6.	熟练使用WebStorm 、Koala、Hbuild常用设计软件<br/>
                                 7.	熟悉移动端web开发<br/>
                                 8.	熟悉HTTP协议<br/>
                                 9.	熟练使用版本控制git的基本使用<br/>
                                 10.	了解NodeJs<br/>
                                 11.	了解Photoshop的基本使用方法<br/>
                                 12.	了解sql、oracle数据库的基础知识<br/>
                                 </p>
                             </li>
                         </ul>
                     </li>
                 </ul>
           </div>
      </div>
       <div class="navbar dh">
           <div class="container ">
                <button data-target="#nav"data-toggle="collapse"class="navbar-toggle">
                    <span class="menu">MENU</span>
                </button>
               <div id="nav"class=" text-center row collapse navbar-collapse "><!--//加按钮折叠样式，和上面配套使用-->
                   <ul class="nav navbar-nav cont">
                       <li class=""><a href="javascript:void(0)"id="ee">Education</a></li>
                       <li class=""><a href="javascript:void(0)"id="ew">Work Experience</a></li>
                       <li class=""><a href="javascript:void(0)"id="ep">My Projects</a></li>
                       <li class=""><a href="#g">Gain Prize</a></li>
                   </ul>
               </div>
           </div>
       </div>
</header>




    <section class="section1 container"id="e">
        <div class="page-header">
        <h1 class="text-center">Education</h1>
        </div>
        <div class="education row">
              <div class="row-md-4 po"style="min-height: 223px">
                  <div class="col-md-6"style="min-height: 223px">
                     <p class="pull-right edu-blue">Master Degree -2013</p>
                  </div>
                  <div class="col-md-6 edu-right"style="min-height:223px">
                      <span class=" icon glyphicon glyphicon-education text-center "></span>
                      <p class="edu-white">烟台大学</p>
                      <p class="edu-desc">
                         烟台大学普通本科，软件工程专业。
                      </p>
                  </div>
              </div>
              </div>

        </div>
    </section>

    <section class="section2"id="w">
        <div class="container">
        <div class="page-header">
            <h1 class="text-center">Work Experience</h1>
        </div>
        <div class="row">
            <div class="row-md-4 po"style="min-height: 223px">
                <div class="col-md-6"style="min-height: 223px">
                    <p class="pull-right edu-blue">Master Degree -2016</p>
                </div>
                <div class="col-md-6 edu-right"style="min-height: 223px">
                    <span class=" icon glyphicon glyphicon-education text-center "></span>
                    <p class="pull-right edu-white">山东捷瑞数字科技股份有限公司</p>
                    <p class="edu-desc2">
                        &nbsp;&nbsp;&nbsp;绿叶投资官网
                        <br/>
                        项目描述：绿叶投资官网网页的编写，其中包括首页、集团概况、咨询中心、产业运营、企业文化、人力资源等前端网页内容。
                        项目分工：团队合作，主要任务为部分前端页面实现
                        主要技术：①运用了html标签对页面进行了基本的布局
                        ②用css对基本布局进行效果渲染
                        ③用jQuery实现页面的图片轮播，页面锚链接缓慢移动等效果。
                        ④还用到了媒体查询实现网页的响应
                        ⑤touch.js实现移动端触摸效果，完美适用于移动端
                    </p>
                </div>
            </div>
            <div class="row-md-4 po"style="min-height: 223px">
                <div class="col-md-6"style="min-height: 223px">
                    <p class="pull-right edu-center1">山东捷瑞数字科技股份有限公司<br/></p>
                    <p class="pull-right edu-desc2">
                        &nbsp;&nbsp;&nbsp;烟台长岛宝悦海洋食品有限公司网站
                        <br/>
                        项目描述：烟台长岛宝悦海洋食品有限公司网站主要包括网站首页、关于我们、新闻中心、产品介绍、养殖现场、加工中心、售后服务、联系我们等页面的编写
                        项目分工：团队合作，主要承担部分前端网页的实现
                        主要技术：①运用Html实现基本页面布局；
                        ②css3实现布局效果的渲染，部分动画效果的实现（比如鼠标滑过图片放大效果）；
                        ③运用jQuery框架实现图片轮播、点击切换图片等界面动态效果的展示
                    </p>
                </div>

                <div class="col-md-6 edu-right"style="min-height: 223px">
                    <span class=" icon glyphicon glyphicon-education text-center "></span>
                    <p class="edu-blue edu-center2">Master Degree -2016</p>
                </div>
            </div>
        </div>
        </div>
    </section>

     <section class="section3"id="p">
         <div class="container">
          <div class="page-header"><h1 class="text-center">My Projects</h1></div>

             <div class="row shixiantupianfangda">
                 <div class="row-md-6 tjjl size">
                 <div class="col-md-6 size">
                     <a href="http://gc1993.oschina.io/shifeng/html/index.html" class="adddesc">
                         <img src="img/img1.png" alt="时风"class="img-responsive img-rounded picture"/>
                         <div class="projDesc text-center">
                             <span class="span">绿绿叶投资官网</span>
                         </div>
                     </a>
                 </div>
                 <div class="col-md-6 size">
                     <a href="http://gc1993.oschina.io/shifeng/html/index.html" class="adddesc">
                         <img src="img/img2.png" alt="时风"class="img-responsive img-rounded picture"style="max-height: 498px"/>
                         <div class="projDesc text-center">
                             <span class="span">烟烟台长岛宝悦海洋食品有限公司官网</span>
                         </div>
                     </a>
                 </div>
                 </div>

             </div>
         </div>
     </section>


    <footer class="navbar-fixed-bottom text-center footer">
        <abbr title="宫晨">gc</abbr>版权所有gc_1993 &copy;2016
    </footer>

<script src="bootstrapfile/js/jquery-3.1.0.min.js"></script>
<script src="bootstrapfile/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-1.8.2.min.js"></script>
<script src="assets/js/supersized.3.2.7.min.js"></script>
<script src="assets/js/supersized-init.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/BackToTop.jquery.js"></script>
<script>
    /*页面锚链节*/
    $(function () {
        var speed = 800;//滚动速度
        var h=document.body.clientHeight;
        console.log(h);
        var e = document.getElementById("e").offsetTop;
        var w= document.getElementById("w").offsetTop;
        console.log("w:"+w);
        //回到底部
        var windowHeight = parseInt($("body").css("height"));//整个页面的高度
        $("#ep").click(function () {
            $('html,body').animate({
                        scrollTop: h+'px'
                    },
                    speed);
        });

        /*去第一部分*/
        $("#ee").click(function () {
            $("body").animate(
                    {
                        scrollTop:e+'px'
                    },
                    speed);
        });
        /*第二部分*/
        $("#ew").click(function () {
            $("body").animate(
                    {
                        scrollTop:w+'px'
                    },
                    speed);
        });

        $( "#gotop").click( function () {
            $( "html,body").animate({ "scrollTop" : 0 }, "slow");
        });
    })

</script>
<script type="text/javascript">

    /*锚链节 回到顶部*/
    $(document).ready(function(){
        BackToTop({
            text : '',
            autoShow : true,
            timeEffect : 800,
            appearMethod : 'slide',
            effectScroll : 'easeOutCubic'
        });
    });
</script>
</body>
</html>